<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<!-- 引入 ECharts 文件 -->
	<script src="js/echarts.js"></script>

</head>

<body>
	<!---为ECharts准备一个具备大小（宽高）的DOM--->
	<div id="main" style="width: 800px; height: 600px"></div>
	<script type="text/javascript">
		//基于准备好的DOM，初始化ECharts图表
		var myChart = echarts.init(document.getElementById("main"));
		var option = {
			//指定图表的配置项和数据
			legend: { data: ['一般值', '极值'] },
			xAxis: { scale: true },
			yAxis: { scale: true },
			series: [{
				type: 'effectScatter',  //设置具有涟漪特效的散点图
				//设置图形是否不响应和触发鼠标事件，默认false，即响应和触发鼠标事件
				silent: false,
				//设置系列名称,用于legend的图例筛选
				//在setOption更新数据和配置项时用于指定对应的系列
				name: '极值',
				legendHoverLink: false,  //设置是否启用图例hover时的联动高亮
				hoverAnimation: false,  //设置是否开启鼠标hover的提示动画效果
				effectType: 'ripple',  //设置特效类型,目前只支持涟漪特效'ripple'
				//设置何时显示特效，'render'绘制完成后显示特效
				//'emphasis'高亮(hover)的时候显示特效
				showEffectOn: 'render',
				rippleEffect: {  //设置涟漪特效
					period: 2,  //设置动画的时间，数字越小，动画越快
					scale: 5.5,  //设置动画中波纹的最大缩放比例
					brushType: 'fill',  //设置波纹的绘制方式，可选'stroke'和'fill'
				},
				symbolSize: 20,  //设置特效散点图符号的大小
				color: 'green',
				data: [  //设置特效散点图的数据值
					[172.7, 87.2],
					[153.4, 42]]
			},
			{
				name: '一般值', type: 'scatter', color: '#FFCCCC',
				data: [[167.0, 64.6], [177.8, 74.8], [159.5, 58.0], [169.5, 68.0], [152.0, 45.8],
				[163.0, 63.6], [157.5, 53.2], [164.5, 65.0], [163.5, 62.0], [166.4, 56.6],
				[171.2, 65.1], [161.6, 58.9], [167.4, 67.7], [167.5, 63.0], [168.5, 65.2],
				[181.1, 76.0], [165.0, 60.2], [174.5, 70.0], [171.5, 68.0], [163.0, 72.0],
				[154.4, 46.2], [162.0, 55.0], [176.5, 83.0], [160.0, 54.4], [164.3, 59.8],
				[162.1, 53.6], [170.0, 73.2], [160.2, 52.1], [161.3, 67.9], [178.0, 70.6],
				[168.9, 62.3], [163.8, 58.5], [167.6, 54.5], [160.0, 50.2], [172.7, 87.2],
				[167.6, 58.3], [165.1, 56.2], [160.0, 50.2], [170.0, 72.9], [157.5, 59.8],
				[167.6, 61.0], [160.7, 69.1], [163.2, 55.9], [152.4, 46.5], [153.4, 42],
				[168.3, 54.8], [180.3, 60.7], [165.5, 60.0], [165.0, 62.0], [164.5, 60.3]],
			}]
		};
		//使用刚指定的配置项和数据显示图表
		myChart.setOption(option); 
	</script>
</body>

</html>